<template>
    <div class="fixed-assets-statistics">
        <router-link to="/main/xingzheng/gudingzichan" class="back-link">返回</router-link>
        <h2 class="page-title">{{ pageTitle }}</h2>

        <div class="form-row">
            <div class="form-group">
                <label>月份：</label>
                <input v-model="formData.month" type="month" :disabled="isView" class="form-input">
            </div>
            <div class="form-group">
                <label>统计日期：</label>
                <input min="1000" v-model="formData.statisticsDate.year" type="number"
                    style="width: 60px; margin-right: 5px;" :disabled="isView" class="form-input"> 年
                <input min="0" v-model="formData.statisticsDate.month" type="number"
                    style="width: 60px; margin-right: 5px;" :disabled="isView" class="form-input"> 月
                <input min="0" v-model="formData.statisticsDate.day" type="number" style="width: 60px;"
                    :disabled="isView" class="form-input"> 日
            </div>
        </div>

        <div v-if="!isView" class="button-group">
            <button @click="addAssetItem" class="action-button">新增</button>
            <button @click="deleteSelectedItems" class="action-button">删除选中</button>
            <button @click="saveData" class="action-button">保存</button>
            <button @click="goToList" class="action-button">列表</button>
        </div>
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr style="position: sticky; top: 0;">
                        <th><input type="checkbox" v-model="isAllChecked" @change="toggleAllCheck"></th>
                        <th>序号</th>
                        <th>资产名称</th>
                        <th>规格/参数</th>
                        <th>单位</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>金额</th>
                        <th>使用部门</th>
                        <th>固定资产编号</th>
                        <th>固定资产卡片编号</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in assetList" :key="index">
                        <td><input type="checkbox" v-model="item.isChecked" @change="updateAllCheckedStatus"
                                :disabled="isView"></td>
                        <td>{{ index + 1 }}</td>
                        <td><input v-model="item.assetName" :disabled="isView" class="form-input"></td>
                        <td><input v-model="item.specifications" :disabled="isView" class="form-input"></td>
                        <td><input v-model="item.unit" :disabled="isView" class="form-input"></td>
                        <td><input v-model="item.quantity" type="number" :disabled="isView" class="form-input"></td>
                        <td><input v-model="item.unitPrice" type="number" :disabled="isView" class="form-input"></td>
                        <td><input v-model="item.amount" type="number" :disabled="isView" class="form-input"></td>
                        <td><input v-model="item.department" :disabled="isView" class="form-input"></td>
                        <td><input v-model="item.assetNumber" :disabled="isView" class="form-input"></td>
                        <td><input v-model="item.cardNumber" :disabled="isView" class="form-input"></td>
                        <td><input v-model="item.remark" :disabled="isView" class="form-input"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label>复核：</label>
                <input v-model="formData.reviewer" :disabled="isView" class="form-input">
            </div>
            <div class="form-group">
                <label>审核：</label>
                <input v-model="formData.approver" :disabled="isView" class="form-input">
            </div>
            <div class="form-group">
                <label>制表：</label>
                <input v-model="formData.creator" :disabled="isView" class="form-input">
            </div>
        </div>

        <div class="footer-info">
            <span>表单编号及版本：AM-JY-175 A/0 </span>
            <span>保存期限：长期</span>
        </div>
    </div>
</template>

<script>
import { saveStatistics, getStatisticsDetail } from '@/api/fixedAssetsStatistics'

export default {
    data() {
        return {
            pageType: 'add', // add, edit, view
            formData: {
                month: '',
                statisticsDate: {
                    year: '',
                    month: '',
                    day: ''
                },
                reviewer: '',
                approver: '',
                creator: ''
            },
            assetList: [
                {
                    isChecked: false,
                    assetName: '',
                    specifications: '',
                    unit: '',
                    quantity: 0,
                    unitPrice: 0,
                    amount: 0,
                    department: '',
                    assetNumber: '',
                    cardNumber: '',
                    remark: ''
                }
            ],
            isAllChecked: false
        };
    },
    computed: {
        isView() {
            return this.pageType === 'view';
        },
        pageTitle() {
            const titles = {
                add: '新增固定资产月度统计表',
                edit: '编辑固定资产月度统计表',
                view: '查看固定资产月度统计表'
            };
            return titles[this.pageType] || titles.add;
        }
    },
    created() {
        this.initPageData();
    },
    methods: {
        async initPageData() {
            const { id, type } = this.$route.query;
            if (type) {
                this.pageType = type;
            }
            if (id) {
                try {
                    const response = await getStatisticsDetail(id);
                    if (response.data) {
                        const detail = response.data;
                        this.formData = {
                            month: detail.month,
                            statisticsDate: detail.statisticsDate,
                            reviewer: detail.reviewer,
                            approver: detail.approver,
                            creator: detail.creator
                        };
                        this.assetList = detail.assetList.map(item => ({
                            ...item,
                            isChecked: false
                        }));
                    }
                } catch (error) {
                    this.$message.error('获取详情失败：' + error.message);
                }
            }
        },
        addAssetItem() {
            this.assetList.push({
                isChecked: false,
                assetName: '',
                specifications: '',
                unit: '',
                quantity: 0,
                unitPrice: 0,
                amount: 0,
                department: '',
                assetNumber: '',
                cardNumber: '',
                remark: ''
            });
            this.updateAllCheckedStatus();
        },
        deleteSelectedItems() {
            if (confirm('确定要删除所选行吗？')) {
                this.assetList = this.assetList.filter(item => !item.isChecked);
                this.updateAllCheckedStatus();
            }
        },
        toggleAllCheck() {
            this.assetList.forEach(item => {
                item.isChecked = this.isAllChecked;
            });
        },
        updateAllCheckedStatus() {
            this.isAllChecked = this.assetList.every(item => item.isChecked);
        },
        validateForm() {
            if (!this.formData.month) {
                this.$message.error('请选择月份');
                return false;
            }
            if (!this.formData.statisticsDate.year || !this.formData.statisticsDate.month || !this.formData.statisticsDate.day) {
                this.$message.error('请填写完整的统计日期');
                return false;
            }
            if (!this.assetList.length) {
                this.$message.error('请至少添加一条资产记录');
                return false;
            }
            for (let item of this.assetList) {
                if (!item.assetName) {
                    this.$message.error('资产名称不能为空');
                    return false;
                }
                if (!item.quantity || item.quantity <= 0) {
                    this.$message.error('数量必须大于0');
                    return false;
                }
                if (!item.unitPrice || item.unitPrice <= 0) {
                    this.$message.error('单价必须大于0');
                    return false;
                }
            }
            return true;
        },
        goToList() {
            this.$router.push('/main/xingzheng/gdzctongji/gdzctongjiList');
        },
        async saveData() {
            if (!this.validateForm()) {
                return;
            }
            try {
                const dataToSave = {
                    ...this.formData,
                    assetList: this.assetList.map(item => ({
                        ...item,
                        isChecked: undefined
                    }))
                };
                const response = await saveStatistics(dataToSave);
                if (response) {
                    this.$message.success('保存成功');
                    this.$router.push('/main/xingzheng/gdzctongji/list');
                }
            } catch (error) {
                this.$message.error('保存失败：' + error.message);
            }
        }
    }
};
</script>

<style scoped>
/* 使用宋体字体 */
* {
    font-family: '宋体', sans-serif;
}

.fixed-assets-statistics {
    padding: 20px;
    max-width: 1200px;
    min-height: calc(100vh - 60px);
    margin: 0 auto;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 在style标签中添加以下样式 */
.table-container {
    max-height: 300px;
    /* 设置表格容器的最大高度 */
    overflow-y: auto;
    /* 当内容超出高度时显示垂直滚动条 */
}

.back-link {
    display: flex;
    color: #1890ff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: #40a9ff;
}

.page-title {
    text-align: center;
    font-size: 1.2em;
    color: #333;
}

.form-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    align-items: center;
}

.form-group label {
    margin-right: 10px;
    font-weight: bold;
}

.form-input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-input:focus {
    border-color: #1890ff;
}

.button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.action-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: #1890ff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.action-button:hover {
    background-color: #40a9ff;
}

.data-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

.data-table th,
.data-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

.data-table th {
    background-color: #f0f0f0;
    font-weight: bold;
}

.footer-info {
    display: flex;
    justify-content: space-between;
    color: #666;
}
</style>
